<template>
    <div class="myblog">
      <div class="classify">
        <ul>
            <router-link to="/usercenter">
              <li class="iconfont"><a href="###">&#xe616;个人信息</a></li>
            </router-link>
            <router-link to="/like">
              <li class="iconfont"><a href="#/like">&#xe686;我的关注</a></li>
            </router-link>
            <router-link to="/fans">
              <li class="iconfont"><a href="###">&#xe6cf;我的粉丝</a></li>
            </router-link>
            <router-link to="/collect">
              <li class="iconfont"><a href="###">&#xe60c;我的收藏</a></li>
            </router-link>
            <router-link to="/myblog">
              <li class="iconfont active"><a href="###" class="active">&#xe6af;我的博客</a> <i style="color:#26a2ff">{{this.length}}</i></li>
            </router-link>
            <router-link to="myvideo">
              <li class="iconfont"><a href="###">&#xe64e;我的视频</a></li>
            </router-link>
            <router-link to="mybook">
              <li class="iconfont"><a href="###">&#xe777;我的书籍</a></li>
            </router-link>
          </ul>
      </div>

      <div class="login" v-show="login">
        <a href="/#/login">还未登录，请先登录！</a>
      </div>
      
      <div class="single" v-show="details" ref="wrapper">
        <ul>

          <li v-show="shows[index]" v-for="(item,index) in list" :key="item.index">
            <p class="title" @click="showdetails(index)"><a href="###">{{item.title}}</a></p>
            <div class="main ql-snow ql-editor" @click="showdetails(index)" v-html="item.content">
              {{item.content}}
            </div>
           
            <div class="more">
              <span class="first">
                <i style="font-size: .8rem" @click="showdetails(index)">{{item.createtime.slice(0,10)}} {{item.createtime.slice(11,20)}}</i>
                <i class="iconfont" @click="showdetails(index)"><a href="###" title="浏览量">&#xe67f;{{item.browse}}</a></i>
                <i class="iconfont" @click="showdetails(index)"><a href="###" title="评论">&#xe6ab;{{item.comments}}</a></i>
                <i class="iconfont" @click="showdetails(index)"><a href="###" title="点赞">&#xe6d4;{{item.likes}}</a></i>
                <i class="iconfont" @click="showdetails(index)"><a href="###" title="收藏">&#xe690;{{item.favorite}}</a></i>
              </span>

              <span class="second">
                
                <i class="iconfont"><a href="###" title="删除" class="delete" @click="del(index)">&#xe68f;</a></i>
              </span>
            </div>

          </li>
          
        </ul>
      </div>

      <div class="details"  v-show="blog">
        <div class="main">
            <p class="title">
              <a href="###" class="iconfont a" @click="back()" title="返回">&#xe634;</a>
              <i v-show="show">{{this.detlist.title}}</i>
              <input type="text" ref="title" v-show="chashow" :value="this.detlist.title">
              <a href="###" class="iconfont change" @click="change()" title="编辑" v-show="show">&#xe609;</a>
              <span>
                <button v-show="chashow" @click="cancel()"><a href="###">取消</a></button>
                <button v-show="chashow" @click="sure()"><a href="###">确定</a></button>
              </span>
            </p>

            <p class="data">
              <span class="sort">分类专栏：<a href="###" v-show="show">{{this.detlist.clazz}}</a> 
                <select v-show="chashow" ref="kind" :value="this.detlist.clazz">
                  <option>HTML</option>
                  <option>CSS</option>
                  <option>JAVASCRIPT</option>
                  <option>ES6</option>
                  <option>NODE.JS</option>
                  <option>VUE.JS</option>
                  <option>JAVA</option>
                  <option>PYTHON</option>
                  <option>C</option>
                  <option>C++</option>
                  <option>PHP</option>
                  <option>WEB</option>
                  <option>JQUERY</option>
                  <option>AJAX</option>
                  <option>DOM</option>
                  <option>XML</option>
                  <option>NET</option>
                  <option>JAVAWEB</option>
                  <option>ELEMENT</option>
                  <option>PS</option>
                  <option>UI</option>
                  <option>其它</option>
                </select>
              </span>
              <span>{{time}}</span>
              <span class="iconfont">&#xe65c; {{this.detlist.browse}}</span>
              <span class="iconfont">&#xe690; {{this.detlist.favorite}}</span>
            </p>
            
            <div class="blog ql-snow ql-editor" v-html="this.detlist.content" v-show="show">
              {{this.detlist.content}}
              
            </div>
            <div class="editor" v-show="chashow">
              <editor ref="content" v-model="content" @push="add"></editor>
            </div>
            <p class="icon">
              <span class="iconfont"><a href="###" title="点赞">&#xe6d4;</a> <i>{{this.detlist.likes}}</i> </span>
              <span class="iconfont"><a href="###" title="评论">&#xe6a4;</a> <i>{{this.detlist.comments}}</i></span>
              <span class="iconfont"><a href="###" title="收藏">&#xe690;</a> <i>{{this.detlist.favorite}}</i></span>
              
            </p>
        </div>
       
        <div class="comment">
          <ul>
            <li v-show="!
            
            this.detlist.comments"><p>暂无评论</p></li>
            <li v-for="(item,index) in listp" :key="item.index">
              <p @mouseover="delshow(index)" @mouseleave="leave(index)" v-show="showp[index]">
                <router-link :to='"/userdetails/" + item.user.id' tag="span">
                  <img :src="item.user.photo" alt="">{{item.user.name}}：
                </router-link>
                {{item.comment.message}} 
                <i>{{item.comment.createtime.slice(0,10)}}</i>
                <a href="###" class="iconfont" title="删除评论" v-show="showdel[index]" @click="delcom(index)">&#xe66e;</a>
              </p>
            </li>
            <li class="send">
              <input type="text" placeholder="发表评论" v-model="sendmess">
              <span @click="send()"><a href="###">发送</a></span>
            </li>
          </ul>
        </div>

      </div>
      

      <div class="mark"  v-show="isshow">
          <p>确定删除？</p>
          <span><a href="###" @click="no()">取消</a></span>
          <span><a href="###" @click="dele()">确定</a></span>
      </div>

      <p class="page">
        <span><a href="###" class="iconfont" title="上一页" @click="last()">&#xe634;</a></span>
        <span><i>{{page}}</i></span>
        <span><a href="###" class="iconfont" title="下一页" @click="next()">&#xe666;</a></span>
      </p>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
import BScroll from 'better-scroll'
import editor from "../../../../../../static/js/editor"
export default {
    name: 'myblog',
    components : {
      editor,
    },
    data () {
      return { 
        isshow: false,
        blog: false,
        details: false,
        show: true,
        chashow: false,
        login: true,
        showdel: [],
        showp: [],
        list: [],
        listp: [],
        shows: [],
        index: '',
        indexd: '',
        detlist: [],
        time: '',
        kind: '',
        title: '',
        content: '',
        sendmess: '',
        page: 1,
        length: '',
      }
    },

    mounted () {
      this.$nextTick(() => {
        // 解决移动端因vue数据更新异步而无法滚动的问题
        this.scroll = new BScroll(this.$refs.wrapper, {
          click:true, //设置click参数，使单句歌词可点击
          adjustTime: 350, // 拉动之后的返回时间，默认400
          mouseWheel: true,
        })
      })

    },

    methods: {
      last () {
        if(this.page > 1) {
          this.page --
          this.length -= this.list.length
          let postData = qs.stringify({
            page: this.page,
          })

          axios.post(`/api/showB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              this.list = response.data
              for (var i = 0;i < this.list.length; i++) {
              this.shows.push(true)
              }
              // console.log(this.shows)
              // console.log(this.icons)
              console.log(this.list)
            } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是第一页了！"
          })
        }

      },

      next () {
        if (this.list.length == 10) {
          this.page ++
          let postData = qs.stringify({
            page: this.page,
          })

          axios.post(`/api/showB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              this.list = response.data
              this.length += this.list.length
              for (var i = 0;i < this.list.length; i++) {
              this.shows.push(true)
              }
              // console.log(this.shows)
              // console.log(this.icons)
              console.log(this.list)
            } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是最后一页了！"
          })
        }
      },

      del (index) {
        this.isshow = true
        this.index = index
      },

      no () {
          this.isshow = false
      },

      dele () {
        this.isshow = false
        this.shows[this.index] = !this.shows[this.index]
        let newItem = this.shows[this.index]
        Vue.set(this.shows, this.index, newItem)

        let id = this.list[this.index].id

        let postData = qs.stringify({
          page: 1,
        })

        axios.post(`/api/deleteB/${id}`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            console.log(response.data)
            this.length --
          } 

        })

        let Data = qs.stringify({
          page: 1,
        })

        axios.post(`/api/showB`, Data, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.list = response.data
            for (var i = 0;i < this.list.length; i++) {
            this.shows.push(true)
            }
            // console.log(this.shows)
            // console.log(this.icons)
            console.log(this.list)
          } 

        })
      },

      showdetails (index) {
        this.blog = true
        this.details = false
        this.detlist = this.list[index]
        // console.log(this.detlist)
        this.$refs.content.editor.setText(this.detlist.content)

        this.time = this.list[index].createtime.slice(0,10)
        this.indexd = index

        let postDatap = qs.stringify({
          page: 1,
        })

        let id = this.list[index].id

        axios.post(`/api/blog/${id}/comments`, postDatap, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listp = response.data
            for (var i = 0; i < this.listp.length; i++) {
              this.showp.push(true)
              this.showdel.push(false)
            }
            console.log(this.showdel)
            console.log(this.listp)
          } 
        })

      },

      back () {
        this.blog = false
        this.details = true
      },

      change () {
        this.show = false
        this.chashow = true
      },

      add (param) {
        // this.content = this.escapeStringHTML(param);
      },

      escapeStringHTML(str) {
        str = str.replace(/&lt;/g,'<');
        str = str.replace(/&gt;/g,'>');
        return str;
      },

      cancel () {
        this.show = true
        this.chashow = false
      },

      sure () {

        if (this.$refs.title.value == "") {
          this.title = this.detlist.title
        }
        else {
          this.title = this.$refs.title.value
        }

        if (this.$refs.content.editor.getContents().ops[0].insert.length == 1) {
          this.content = this.detlist.content
        }
        else {
          this.content = this.$refs.content.editor.getContents().ops[0].insert
        }

        console.log(this.$refs.content.editor.getContents())
        console.log(this.detlist.content)
        console.log(this.content)

        
        this.kind = this.$refs.kind.value

        console.log(this.title,this.content,this.kind)

        let postData = qs.stringify({
          title: this.title,
          content: this.content,
          clazz: this.kind,
        })

        let id = this.list[this.indexd].id

        axios.post(`/api/updateB/${id}`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            console.log(response.data)
            this.$message({
              type: 'success',
              message: "修改成功！"
            })

            this.show = true
            this.chashow = false

            let postData = qs.stringify({
              page: 1,
            })

            axios.post(`/api/showB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                this.detlist = response.data[this.indexd]
              } 

            })

          } 
        })
        // this.$router.go(0)

      },

      send () {

        let postData = qs.stringify({
          message: this.sendmess,
        })

        let id = this.list[this.indexd].id

        axios.post(`/api/blog/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {

            console.log(response.data)
            this.list[this.indexd].comments ++
            let postDatap = qs.stringify({
              page: 1,
            })


            axios.post(`/api/blog/${id}/comments`, postDatap, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                this.listp = response.data
                for (var i = 0; i < this.listp.length; i++) {
                  this.showp.push(true)
                  this.showdel.push(true)
                }
                console.log(this.showdel)
                console.log(this.listp)
              } 
            })
          } 

          this.$message({
            type: 'success',
            message: "发表成功！"
          })

        })

        this.sendmess = ""
        // this.$router.go(-1)

        // this.$router.go(0)
      },

      delshow (index) {
        this.showdel[index] = !this.showdel[index]
        let newItem = this.showdel[index]
        Vue.set(this.showdel, index, newItem)
      },

      leave (index) {
        this.showdel[index] = !this.showdel[index]
        let newItem = this.showdel[index]
        Vue.set(this.showdel, index, newItem)
      },

      delcom (index) {
        this.showp[index] = !this.showp[index]
        let newItem = this.showp[index]
        Vue.set(this.showp, index, newItem)

        let postDatap = qs.stringify({
          id: this.listp[index].comment.id,
        })

        axios.post(`/api/deleteComment`, postDatap, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listp = response.data
            for (var i = 0; i < this.listp.length; i++) {
              this.showp.push(true)
              this.showdel.push(false)
            }
            console.log(this.showdel)
            console.log(this.listp)
          } 
        })
      },

    },

    created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== "") {
            this.details = true
            this.login = false
          }
        } 

      })

      let postData = qs.stringify({
        page: 1,
      })

      axios.post(`/api/showB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          this.length = this.list.length
          for (var i = 0;i < this.list.length; i++) {

           this.shows.push(true)
          }
          // console.log(this.shows)
          // console.log(this.icons)
          console.log(this.list)
        } 

      })

    },

}
</script>

<style lang="stylus" scoped>
.myblog
  width 100%
  height auto
  position relative
  .classify
    width 15%
    height auto
    position fixed
    margin-top 5rem
    margin-left 1%
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    ul
      padding-top 2rem
      padding-bottom 4rem
      margin-top .5rem
      // background-color red
      li
        width 100%
        margin-top .2rem
        line-height 4rem
        text-align center
        // background-color #fff
       li:hover
         background-color #eee
       .active
         background-color #eee
         color #26a2ff
  .login
    width 80%
    line-height 36.5rem
    top 5rem
    margin-left 17%
    margin-bottom 2rem
    text-align center
    font-size 1rem
    position absolute
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    a
      color red
    a:hover
      color #26a2ff
  .single
    width 82%
    height 39rem
    overflow hidden
    top 5rem
    margin-left 17%
    margin-bottom 2rem
    padding-bottom 2rem
    font-size .9rem
    position absolute
    background-color #fff
    ul
      width 100%
      height auto
      padding-bottom 1rem
      padding-top 1rem
      // background-color red
      li
        width 98%
        height auto
        margin-top 1rem
        margin-left 1%
        padding-top .5rem
        padding-bottom .5rem
        border 1px #ccc solid
        border-radius 10px
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        background-color #fff
        .title
          margin-left 2%
          font-size 1.2rem
          position relative
          // background-color red
          a
            color #26a2ff
        .main
          width 96%
          height 2rem
          margin-left 2%
          //实现多行溢出隐藏
          display -webkit-box
          word-break break-all
          -webkit-box-orient vertical
          -webkit-line-clamp 1
          overflow hidden
          text-overflow ellipsis
          // background-color red
        .more 
          width 96%
          height 1rem
          margin-left 2%
          margin-top .5rem
          // background-color #fff
          .first
            line-height 1rem
            // background-color red
            i 
              margin-right 2%
              a
                font-size .8rem
          .second
            line-height 1rem
            right 1%
            width 20%
            position absolute
            // background-color red
            i 
              margin-left 70%
              a
                font-size 1.2rem
            .delete:hover
              color red
  .details
    width 102%
    height auto
    top 5rem
    margin-left 17%
    margin-bottom 2rem
    font-size .9rem
    position absolute
    // background-color #fff
    .main
      width 77%
      height auto
      margin-bottom .5rem
      padding 1rem 2rem 0rem 2rem
      box-sizing border-box
      // border .05rem #eee solid
      background-color #fff
      .title
        width 90%
        text-align center
        line-height 3rem
        margin-left 5%
        font-size 1.2rem
        color #26a2ff
        // background-color red
        position relative
        input 
          border .05rem #ccc solid
          // background-color red
        .a
          position absolute
          left 0rem
          top -.5rem
          font-size 2rem
        .change
          position absolute
          margin-left 44%
          margin-top -.5rem
          font-size 1.4rem
        span
          width 20%
          position absolute
          right 0%
          // background-color red
          button 
            width 40%
            margin-right 5%
            color #26a2ff
            border .05rem #ccc solid
            border-radius 10px
            background-color #fff
            box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
      .data
        width 90%
        margin-left 5%
        line-height 2rem
        background-color #f5f6f7
        span 
          margin-right 10%
        .sort
          margin-left 4%
          font-size .8rem
      .blog
        width 90%
        margin-left 5%
        margin-top 1rem
        height auto
        text-indent 2rem
        // background-color red
        p
          width 90%
          margin-left 5%
          line-height 1.5rem
          font-size .9rem
          text-indent 2rem
      .editor
        width 100%
        height 35rem
        margin-top 1rem
        // background-color red
      .icon
        width 100%
        line-height 3rem
        margin-top 5rem
        padding-left 10%
        box-sizing border-box
        margin-bottom 0rem
        border-top .05rem #eee solid
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        // background-color skyblue
        span 
          width 10%
          display inline-block
          font-size 1.3rem
          // background-color red
          margin-right 5%
          i 
            font-size 1rem
    .comment
      width 77%
      height auto
      margin-bottom 2rem
      border .05rem #eee solid
      background-color #fff
      ul
        height auto
        li
          width 100%
          font-size .8rem
          margin-bottom .5rem
          padding-top .5rem
          position relative
          // background-color red
          p
            width 85%
            margin-left 2rem
            // background-color red
            img
              height 1.5rem
              width 2.5%
              margin-left 0%
              border-radius 50%
              box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
            i
              font-size .7rem
              color #aaa
            a
              position absolute 
              right 9rem
              font-size 1.5rem
              // background-color red
          p:hover
            background-color #f5f6f7
        .send
          position relative
          input 
            width 85%
            margin-left 2rem
            position absolute
            bottom 0rem
            text-indent 1.8rem
            font-size .8rem
            border .05rem #ccc solid
          span
            padding .3rem 1rem
            margin-left 90%                
            border .05rem #ccc solid
            background-color #fff
            a
              color #26a2ff
          span:hover
            background-color skyblue
            a
              color #fff
  .mark
    width 20%
    height 8rem
    position absolute 
    top 6rem
    left 45%
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    p
      width 100%
      line-height 3rem
      font-size 1.2rem
      text-align center
      margin-top .5rem
      //   background-color #fff
    span 
      line-height 4rem
      padding .8rem
      margin-left 20%
      font-size .8rem
      background-color #fff
  .page 
    width 15%
    left 1%
    line-height 3rem
    bottom 1rem
    position fixed
    z-index 10
    display flex
    border .05rem #ccc solid
    background-color #fff
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    span
      width 10%
      margin-left 15%
      text-align center
      font-size 1.2rem
      background-color #fff
      a
        font-size 2rem
      i
        color #26a2ff
</style>